<template>
  <div class="FollowUpRecordCont">
    <!-- 跟进记录内容 -->
    <div class="FollowUpRecordMian">
      <div class="noData" v-show="pageData.total == 0">暂无数据</div>
      <Timeline>
        <template v-for="(item, index) in customerPortrait">
          <TimelineItem v-if="item.category == 1" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：跟进计划</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              <span>客户：{{ item.customerName }}</span><span>跟进类型：{{
                  item.followType == 101
                    ? "首看回访"
                    : item.followType == 102
                    ? "复看回访"
                    : item.followType == 103
                    ? "日常回访"
                    : ""
                }}</span><span>跟进时间：{{ item.timeData }}</span>
            </p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 2 || item.category == 3" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：{{
                  item.category == 2
                    ? "首看回访"
                    : item.category == 3
                    ? "复看回访"
                    : item.category == 4
                    ? "日常回访"
                    : ""
                }}</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>跟进记录：{{ item.gistRemark }}</p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 4" :key="index">
            <p>
              <span>跟进时间：{{ item.createTime }}</span><span>跟进人：{{ item.operatorName }}</span>
            </p>
            <p>要点备注：{{ item.gistRemark }}</p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 6 && appId != 49" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：操作</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              {{
                item.followType == 601
                  ? "联系了客户"
                  : item.followType == 602
                  ? "编辑了客户信息"
                  : ""
              }}
            </p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 7" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：线上互动</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              <span>客户昵称：{{ item.nickName }}</span><span>来源渠道：{{ item.channel }}</span><span>互动方式：{{ item.interactiveMode }}</span>
            </p>
            <p>
              <span>互动对数/时长：{{ item.interactiveData }}</span><span>互动时间：{{ item.timeData }}</span>
            </p>
            <p>跟进要点：{{ item.gistRemark }}</p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 8" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：留资</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              <span>留资号码：{{ item.stayPhone }}</span><span>客户姓名：{{ item.customerName }}</span><span>性别：{{
                  item.gender == 1 ? "男" : item.gender == 2 ? "女" : ""
                }}</span>
            </p>
            <p>
              <span>备用号码：{{ item.reserve }}</span><span>微信号：{{ item.wxNumber }}</span>
            </p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 9" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：回访</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              <span>回访环节：{{ reviewActionList[item.reviewAction] }}</span><span>回访时间：{{ item.timeData }}</span>
            </p>
            <p>回访备注：{{ item.gistRemark }}</p>
            <p class="imageP">
              <b>图片：</b>
              <strong id="annexBox1">
                <img v-for="(item, index) in item.resourceUrl &&
                  item.resourceUrl.split(',')" :key="index" :src="item" />
              </strong>
            </p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 10" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：邀约到访</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p><span style="font-weight: 600">线上邀约</span></p>
            <p>
              <span>客户：{{ item.customerName }}</span><span>到访案场：{{ item.buildingAlias }}</span>
            </p>
            <p>
              <span>到访时间：{{ item.timeData }}</span><span>接待人：{{ item.receptionName }}</span>
            </p>
            <p>要点备注：{{ item.gistRemark }}</p>
            <p><span style="font-weight: 600">到访结果</span></p>
            <p>
              <span>到访状态：{{
                  item.visitStatus == 1
                    ? "未到访"
                    : item.visitStatus == 2
                    ? "已到访"
                    : ""
                }}</span><span>实际到访时间：{{ item.realTime }}</span>
            </p>
            <p>
              <span>实际接待人：{{ item.realReceptionName }}</span>
            </p>
            <p>到访备注：{{ item.visitRemark }}</p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 11" :key="index">
            <p>
              <span>操作时间：{{ item.operationTime }}</span><span>跟进类型：来人</span><span>操作人：{{ item.operatorName }}</span>
            </p>
            <p>
              <span>客户：{{ item.customerName }}</span><span>到访案场：{{ item.buildingAlias }}</span>
            </p>
            <p>
              <span>实际到访时间：{{ item.realTime }}</span><span>实际接待人：{{ item.realReceptionName }}</span>
            </p>
            <p>要点备注：{{ item.gistRemark }}</p>
          </TimelineItem>
          <TimelineItem v-if="item.category == 12" :key="index">
            <p>
              <span>批注时间：{{ item.operationTime }}</span><span>批注人：{{ item.operatorName }}</span>
            </p>
            <p>要点备注：{{ item.gistRemark }}</p>
          </TimelineItem>
        </template>
      </Timeline>
      <div class="pagePublicStyle" v-show="pageData.total > 0">
        <div class="totalCount">
          当前第 {{ pageData.page }} 页， 当前第
          {{ (pageData.page - 1) * pageData.rows + 1 }} 条到第
          {{
            pageData.page * pageData.rows > pageData.total
              ? pageData.total
              : pageData.page * pageData.rows
          }}
          条， 共 {{ pageData.total }} 条
        </div>
        <Page class="pager" :total="pageData.total" :current="pageData.page"
          :pageSize="pageData.rows" :page-size-opts="pageData.pageSizeOpts"
          @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun"
          placement="top" show-elevator show-sizer />
      </div>
    </div>
  </div>
</template>
<script>
  import tool from "@/common/tool.js";
  import customerMgr from '@/biz/customer/customer'
  export default {
    components: {},
    props: ["servicePersonnelId", "detailsParams"],
    data() {
      return {
        customerPortrait: [],
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 50],
        },
      };
    },
    methods: {
      operationFollowRecordFun() {
        this.getFollowUp();
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        if (page != 1 || this.pageData.page != 1) {
          this.pageData.page = page;
          this.getFollowUp();
        }
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows;
        this.pageData.page = 1;
        this.getFollowUp();
      },
      //查询跟进记录
      getFollowUp() {
        let params = {
          page: this.pageData.page,
          rows: this.pageData.rows,
          userCustomerId: this.detailsParams ?
            this.detailsParams.userCustomerId : this.$route.query.userCustomerId,
          category: "4,12",
          buildingId: this.detailsParams ?
            this.detailsParams.buildingId : this.$route.query.buildingId,
          customerId: this.detailsParams ?
            this.detailsParams.customerId : this.$route.query.customerId,
          operatorId: JSON.parse(tool.getStorage("userMess")).userId,
        };

        customerMgr.followUp(params)
          .then((res) => {
            console.log(res, "客户跟进记录");
            this.customerPortrait = res.records;
            this.pageData.total = Number(res.total);
          })
      },
    },
    created() {
      this.getFollowUp();
    },
  };
</script>
<style lang="scss" scoped>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .footer {
    text-align: center;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }

  .FollowUpRecordContModel {
    .ivu-tabs {
      overflow: visible;
    }
  }

  .FollowUpRecordCont {
    .FollowUpRecordMian {
      margin-top: 16px;

      .ivu-timeline-item-content {
        padding-bottom: 0;
      }

      p {
        margin-bottom: 4px;
      }

      span {
        display: inline-block;
        width: 280px;
        margin-right: 30px;
        vertical-align: middle;
      }

      .imageP {
        b {
          font-weight: normal;
          vertical-align: top;
        }

        img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
      }
    }
  }

  ::v-deep .ivu-poptip-popper {
    z-index: 900;
  }

  ::v-deep .ivu-modal-body {
    padding: 0;
  }

  .subscribeModalStateModal {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px 16px 16px;
  }

  .receptionPeopleStyle {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #515a6e;
    background-color: #fff;
  }

  .noData {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 50px 0;
  }

  .customerVisitModel {
    .cont {
      padding: 16px;
    }

    p {
      margin-bottom: 10px;
    }

    .footer {
      padding-top: 20px;
      text-align: center;

      button {
        width: 120px;
        margin: 0 10px;
      }
    }
  }
</style>